<template>
    <div class="container-box">
        <div style="height: 98px;"></div>
        <!-- 查看照片 -->
        <morePicture :url="currentImage" :showimage="showimage" :deg="deg" :num="num" :isfirst="isfirst"
            :islast="islast" :imglist="imgList" @closeimage="closeimage">
        </morePicture>
        <!-- serch -->
        <div class="bgfffs filter_box" :style="contentStyleObj">
            <page-filter :className="className" lableWidth="70px" ref="from" :query.sync="filterInfo.query"
                :filter-list="filterInfo.list" :list-type-info="listTypeInfo" @handleClick="handleClick"
                @handleEvent="handleEvent" @upenter="upenter">
            </page-filter>
        </div>

        <div class="bgfff">
            <div class="btn-div" style="margin-left: 10px;">
                <el-button class="btn-middle" type="primary" @click="addGroup" size="mini">添加企业</el-button>
            </div>
            <div class="tableHeight" ref="tableWrapper" style="padding: 10px 10px">
                <page-table :checkBox="false" ref="table" :tabIndex="true" :dataText="dataText" v-loading="loading"
                    :init-curpage="tableInfo.initCurpage" :data.sync="tableInfo.data" :pageParm="pageParm"
                    showRow="invoice" :query="filterInfo.query" :field-list="tableInfo.fieldList"
                    :list-type-info="listTypeInfo" :showSummary="showSummary" :getSummaries="getSummaries"
                    :handle="tableInfo.handle" @handleClick="handleClick" @handleEvent="handleEvent">
                    <!-- <template v-slot:col-accident_image="scope">
                        <span v-if="scope.row.accident_image.length == 0">-</span>
                        <el-image v-else class="picturecss" :src="require('@/assets/images/picture.png')"
                            @click="blockmore(scope.row.accident_image)">
                        </el-image>
                    </template> -->
                    <template v-slot:col-business_license="scope">
                        <i v-if="scope.row.business_license" class="el-icon-picture addicon"
                            @click.stop="openFile(scope.row.business_license)"></i>
                        <p v-if="scope.row.business_license == ''"> - </p>
                    </template>
                </page-table>
            </div>
        </div>
        <page-dialog :class="{ 'dialogCss': dialogInfo.type == 'addGroup' }" :title="dialogInfo.title[dialogInfo.type]"
            :visible.sync="dialogInfo.visible" :width="dialogInfo.width" :bt-loading="dialogInfo.btLoading"
            :bt-list="dialogInfo.btList" shutEvent="close" @handleClick="handleClick" @handleEvent="handleEvent">

            <template v-slot>
                <!-- 浏览图片 -->
                <!-- <el-dialog :visible.sync="dialogVisible" width="50%">
                    <div v-if="dialogInfo.type == 'lookImage'">
                        <img :src="currentImage" style="width: 100%;height: 500px;">
                    </div>
                </el-dialog> -->
                <!-- 添加企业 -->
                <div v-if="dialogInfo.type == 'addGroup' || dialogInfo.type == 'modifyGroup'">
                    <el-form label-position="right" :inline="false" :model="groupForm" ref="groupForm"
                        label-width="110px" :rules="rules" class="demo-ruleForm">

                        <el-form-item label="营业执照：" prop="business_license" class="license">
                            <div class="box_img_item_info" v-if="groupForm.business_license != ''">
                                <i style="font-size: 16px; position: absolute; z-index: 10; top: 2px; right: -20px; color: red; cursor: pointer;"
                                    @click="delImage(groupForm)" class="el-icon-delete"></i>
                                <el-image class="imagess" :preview-src-list="[groupForm.business_license]"
                                    :src="groupForm.business_license" alt=""></el-image>
                            </div>
                            <div v-else>
                                <el-upload class="avatar-uploader" action="" :show-file-list="false"
                                    :http-request="goRequest" :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload" accept=".jpg,.jpeg,.png,.JPG,.JPEG">
                                    <!-- <img v-if="groupForm.business_license" :src="groupForm.business_license" class="avatar"> -->
                                    <i class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                            </div>
                            <div v-if="upload_line">
                                <el-progress :stroke-width="3" :percentage="dataNumber"
                                    :status="imageError ? 'exception' : ''"></el-progress>
                            </div>
                        </el-form-item>

                        <el-form-item label="企业名称：" prop="group_name">
                            <el-input v-model="groupForm.group_name" clearable style="width: 300px"
                                placeholder="请输入企业名称" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="企业代码：" prop="group_id">
                            <el-input v-model="groupForm.group_id" style="width: 200px" autocomplete="off"
                                disabled></el-input>
                        </el-form-item>
                        <el-form-item label="企业账号：" prop="account">
                            <el-input v-model="groupForm.account" clearable style="width: 200px" autocomplete="off"
                                disabled></el-input>
                        </el-form-item>
                        <el-form-item label="登录密码：" prop="pwd" v-if="dialogInfo.type === 'addGroup'">
                            <el-input type="password" v-model="groupForm.pwd" clearable style="width: 200px"
                                placeholder="请输入登录密码" maxlength="12" autocomplete="off" @mousedown.native="nameMouse"
                                :readonly="namebool" @input.native="onInput($event, groupForm.pwd)"></el-input>
                        </el-form-item>
                        <el-form-item label="登录密码：" v-if="dialogInfo.type === 'modifyGroup'">
                            <el-input type="password" v-model="groupForm.pwd" clearable style="width: 200px"
                                placeholder="请输入登录密码" maxlength="12" autocomplete="off" @mousedown.native="nameMouse"
                                :readonly="namebool" @input.native="onInput($event, groupForm.pwd)"></el-input>
                        </el-form-item>
                        <el-form-item label="联系人姓名：" prop="contact_name">
                            <el-input v-model="groupForm.contact_name" clearable style="width: 200px"
                                placeholder="请输入联系人" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号码：" prop="contact_phone">
                            <el-input v-model="groupForm.contact_phone" clearable style="width: 200px"
                                placeholder="请输入联系电话" auto-complete="off" autocomplete="off" type="number"
                                maxlength="11" @input="handleInput" @mousedown.native="nameMouse"
                                :readonly="namebool"></el-input>
                        </el-form-item>
                        <el-form-item label="邮箱：" prop="contact_email">
                            <el-input v-model="groupForm.contact_email" clearable style="width: 200px"
                                placeholder="请输入邮箱" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="办公地址：" prop="address">
                            <el-input v-model="groupForm.address" clearable style="width: 300px" placeholder="请输入注册地址"
                                autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="账期：" prop="settlement_period">
                            <el-select popper-class="select-css" class="selectcss" v-model="groupForm.settlement_period"
                                :clearable="true" placeholder="请选择账期">
                                <el-option v-for="item in settlement_period_list" :key="item.key" :label="item.value"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="服务专员：" prop="service_staff">
                            <el-select popper-class="select-css" class="selectcss" filterable
                                v-model="groupForm.service_staff" clearable placeholder="请选择服务专员">
                                <el-option v-for="item in service_staff_id" :key="item.key" :label="item.value"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="认证：" prop="identity_status">
                            <el-select popper-class="select-css" class="selectcss" filterable
                                v-model="groupForm.identity_status" clearable placeholder="请选择认证状态">
                                <el-option v-for="item in identity_status_list" :key="item.key" :label="item.value"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
                <!-- 收款记录 -->
                <div v-if="dialogInfo.type == 'receiveLog'">
                    <el-table :data="tabItemList" border ref="tabItemList" v-loading="loading" :header-cell-style="{
                        background: 'rgba(238,241,246,1)',
                        fontSize: '12px'
                    }" class="toppp-table" style="width: 100%; font-size: 12px">
                        <el-table-column type="index" align="center" label="序号" width="50">
                        </el-table-column>
                        <el-table-column align="center" prop="amount" label="收款金额">
                        </el-table-column>
                        <el-table-column align="center" prop="pay_date" label="收款时间">
                        </el-table-column>
                        <el-table-column align="center" prop="add_time" label="添加时间">
                        </el-table-column>
                    </el-table>
                </div>
            </template>
        </page-dialog>
    </div>
</template>

<script>

import PageDialog from "@/components/PageDialog";
import PageFilter from "@/components/PageFilter/index";
import PageTable from "@/components/PageTable/index";
import morePicture from "@/components/morePicture";
import { formatter } from "@/utils/index";
import {
    getGroupList,// 列表
    getGroupParam,// 基础参数
    groupAdd,// 添加企业
    groupDetail,//企业详情
    groupEdit,//企业修改
    getGroupCode,//获取企业代码
    editStatus,//修改企业状态
} from '@/api/bill';
import {
    fileUpload,// 照片上传
} from '@/api/api'
export default {
    name: "groupPage",
    components: {
        PageFilter,
        PageDialog,
        PageTable,
        morePicture
    },
    data () {
        return {
            // 图片预览
            dialogVisible: false,
            currentImage: '',
            url: "",
            deg: 0,
            num: 0,
            isfirst: false,
            islast: false,
            imgList: [],
            showimage: false,
            id: 0,
            fullYear: new Date().getFullYear(),
            month: new Date().getMonth() + 1,
            loading: false,
            billLading: '',
            addId: [],
            dataText: "",
            showSummary: false,
            task_count: 0,
            settlement_time: "",
            dataNumber: 10,
            upload_line: false,
            contentStyleObj: {
                height: "100%"
            },
            refresh: false,
            namebool: true,
            className: "forms",
            groupForm: {
                group_id: "",
                group_name: "",
                contact_name: "",
                contact_phone: "",
                contact_email: "",
                address: "",
                business_license: "",
                status: 1,
                service_staff_id: "",
                service_staff: "",
                account: "",
                pwd: "",
                settlement_period_id: "",
                settlement_period: "",
                identity_status: ""
            },
            service_staff_id: [],
            settlement_period_list: [],
            settlement_perio: [],
            identity_status_list: [
                {
                    key: 1,
                    value: '通过'
                },
                {
                    key: 2,
                    value: '不通过'
                }
            ],
            rules: {
                group_name: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "请输入企业名称"
                    }
                ],
                group_id: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "请输入企业代码"
                    }
                ],
                account: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "请输入企业账号"
                    }
                ],
                pwd: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "请输入登录密码"
                    },
                    { min: 6, message: '密码长度至少为6位', trigger: "blur", },
                    { max: 12, message: '密码长度最多为12位', trigger: "blur", }
                ],
                contact_name: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "请输入联系人"
                    }
                ],
                contact_phone: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "请输入联系电话"
                    }
                ],
                contact_email: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "请输入联系邮箱"
                    }
                ],
                contact_email: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "请输入联系邮箱"
                    }
                ],
                address: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "请输入注册地址"
                    }
                ],
                business_license: [
                    {
                        required: true,
                        trigger: "change",
                        message: "请选择营业执照"
                    }
                ],
                settlement_period: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "请选择账期"
                    }
                ],
                service_staff_id: [
                    {
                        required: true,
                        trigger: "blur",
                        message: "请选择服务专员"
                    }
                ],
            },
            // 相关列表
            listTypeInfo: {
                group_id: [],//发布企业
                status: [], //企业状态
                identity_status: [],//认证状态
            },

            // 弹窗相关
            dialogInfo: {
                width: "600px",
                title: {
                    addGroup: "添加企业",
                    modifyGroup: "修改企业"
                },
                visible: false,
                type: "",
                btLoading: false,
                btList: [
                    {
                        label: "取消",
                        event: "close",
                        show: true
                    },
                    {
                        label: "确定",
                        type: "primary",
                        event: "save",
                        show: true
                    }

                ]
            },
            // 过滤相关配置
            filterInfo: {
                query: {
                    page: 1,
                    limit: 20,
                    group_id: "",
                    status: "",
                    identity_status: "",
                },
                list: [
                    {
                        type: "select",
                        label: "发布企业",
                        value: "group_id",
                        list: "group_id",
                        key: "发布企业"
                    },
                    {
                        type: "select",
                        label: "企业状态",
                        value: "status",
                        list: "status",
                        key: "企业状态"
                    },
                    {
                        type: "select",
                        label: "认证状态",
                        value: "identity_status",
                        list: "identity_status",
                        key: "认证状态"
                    },
                    {
                        type: "button",
                        label: "搜索",
                        btType: "primary",
                        event: "search",
                        show: true
                    },
                    {
                        type: "button",
                        label: "重置",
                        event: "reset",
                        show: true
                    }
                ]
            },
            // 分页参数
            pageParm: {
                tableHeight: "52vh", // 表格最大高度
                total: 0, // 总条数
                loading: true, // 加载动画
                pagesizes: [20, 50, 100], // 分页数量列表
                query: {
                    // 查询条件
                    page: 1, // 当前页
                    limit: 20 // 每页条数
                }
            },
            // 表格相关
            tableInfo: {
                refresh: 1,
                initCurpage: 1,
                data: [],
                fieldList: [
                    { label: "企业代码", value: "group_id", width: "80px", },
                    { label: "企业名称", value: "group_name", width: "150px", },
                    { label: "来源", value: "group_type_txt", width: "100px", },
                    { label: "联系人", value: "contact_name", width: "100px" },
                    { label: "联系电话", value: "contact_phone", width: "100px" },
                    { label: "办公地址", value: "address", width: "100px" },
                    { label: "联系邮箱", value: "contact_email", width: "100px" },
                    { label: "营业执照", value: "business_license", type: "slot" },
                    { label: "企业状态", value: "status_text", width: "100px" },
                    { label: "认证状态", value: "identity_status_text", width: "100px" },
                    { label: "发布量", value: "task_count", width: "100px" },
                    { label: "账期", value: "settlement_period", width: "100px" },
                    { label: "服务专员", value: "service_staff", width: "100px" },
                ],
                handle: {
                    label: "操作",
                    width: "200px",
                    btList: [
                        {
                            label: "管理  ",
                            type: "text",
                            //icon: "el-icon-browse",
                            event: "modify",
                            show: true,
                        },
                        {
                            label: "  禁用",
                            type: "text",
                            //icon: "el-icon-browse",
                            event: "un_enable",
                            show: true,
                            ifRender: row => {
                                if (row.status == 1) {
                                    return true;
                                } else {
                                    return false;
                                }
                            }
                        },
                        {
                            label: " 启用",
                            type: "text",
                            //icon: "el-icon-browse",
                            event: "enable",
                            show: true,
                            ifRender: row => {
                                if (row.status == 0) {
                                    return true;
                                } else {
                                    return false;
                                }
                            }
                        },
                    ]
                },
            }
        };
    },
    created () {

        //this.getonemonth();
        this.init({ ...this.pageParm.query, ...this.filterInfo.query });
        this.getParamList();
        // this.getHeight();
        this.fetTableHeight()
        this.upenter();
        //window.addEventListener("resize", this.getHeight);
    },
    mounted () {
        // this.loadAmap()
        // 通过遮罩层关闭图片预览
        document.addEventListener('click', function (e) {
            if (e.target.className == "el-image-viewer__mask") {
                let close = document.querySelector(".el-icon-circle-close");
                close.click();
            }
        });
    },
    //enter事件 与点击查询按钮功能一致
    updated () {
        var that = this;
    },
    activated () {
        this.init(this.filterInfo.query);
        this.getParamList();
        this.upenter();
        this.refresh = false;
    },
    deactivated () {
        this.refresh = true;
    },
    filters: {
        formatter (time) {
            let date = new Date(time),
                text = "";
            if (time !== "") return (text = formatter(date, "yyyy-MM"));
            return text;
        }
    },
    computed: {
    },

    methods: {
        addGroup () {
            this.groupForm = {
                group_id: "",
                group_name: "",
                account: "admin",
                contact_name: "",
                contact_phone: "",
                contact_email: "",
                address: "",
                business_license: "",
                status: 1,
                service_staff: "",
                service_staff_id: "",
                settlement_period: "",
                settlement_period_id: ""
            };
            getGroupCode().then(res => {
                this.groupForm.group_id = res.data.group_id
            })
            this.dialogInfo.type = "addGroup"
            this.dialogInfo.visible = true;
            this.$nextTick(() => {
                this.$refs.groupForm.clearValidate();
            });
        },
        changeService (data) {
            if (data) {
                this.groupForm.service_staff_id = data.id;
                this.groupForm.service_staff = data.value;
            } else {
                this.groupForm.service_staff_id = "";
                this.groupForm.service_staff = "";
            }
        },
        handleAvatarSuccess (res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload (file) {
            const isLt3M = file.size / 1024 / 1024 < 3;
            if (!isLt3M) {
                this.$message.error('上传头像图片大小不能超过 3MB!');
            }
            // return isLt4M;
            // console.log(file, '1111111');
            if (isLt3M) {
                this.imageError = false
                this.upload_line = true
                const intervalId = setInterval(() => {
                    if (this.dataNumber < 95) {
                        this.dataNumber += 5
                    }
                    if (this.dataNumber >= 100) {
                        clearInterval(intervalId); // 停止定时器
                    }
                }, 1200);

                let formData = new FormData();
                formData.append("file", file);
                fileUpload(formData).then(res => {
                    console.log(res, '我是路径')
                    if (res.status == 200) {
                        let path = res.data.href
                        this.$refs.groupForm.clearValidate(['business_license']);
                        this.groupForm.business_license = path
                        this.dataNumber = 100
                        setTimeout(() => {
                            this.upload_line = false
                            this.dataNumber = 10
                        }, 1000);
                    }
                }).catch(response => {
                    console.log('图片上传失败')
                    this.imageError = true
                    this.$message.error('图片上传失败，请重新上传');
                })
            }
        },

        goRequest () {
            console.log('上传成功');
        },
        // 阻止浏览器默认记忆
        nameMouse (e) {
            if (e.target.localName == 'i') {
                this.$set(this.pagerequest, "empNm", "")
            }
            this.namebool = true;
            setTimeout(() => this.namebool = false, 0)
        },
        onInput (event, val) {
            if (val.length === 0) {
                // this.onBlur(event)
                // this.onFocus(event)
                this.namebool = true;
                setTimeout(() => this.namebool = false, 0)
            }
        },
        handleInput (value) {
            // 使用正则表达式限制只能输入数字，并且长度不超过11位
            this.groupForm.contact_phone = value.replace(/[^0-9]/g, '').substring(0, 11);
        },
        // 删除照片
        delImage (item) {
            item.business_license = ''
        },
        //合计
        getSummaries (param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 1) {
                    sums[index] = "合计：";
                    return;
                }
                if (index === 11) {
                    sums[index] = this.task_count;
                    return;
                }

            });
            this.$nextTick(() => {
                this.$refs.table.$refs.table.doLayout();
                this.$refs.table.$refs.table.bodyWrapper.scrollLeft = 0;
            });
            return sums;
        },
        handleClose (tag) {
            this.relationMixedCost.splice(this.relationMixedCost.indexOf(tag), 1);
        },
        unique (arr) {
            const res = new Map();
            return arr.filter(a => !res.has(a) && res.set(a, 1));
        },
        arrayAminusB (arrA, arrB) {
            return arrA.filter(v => !arrB.includes(v));
        },
        //enter 事件防止全局触发
        upenter () {
            var that = this;
            document.onkeydown = e => {
                //13表示回车键，baseURI是当前页面的地址，为了更严谨，也可以加别的，可以打印e看一下
                if (e.keyCode === 13 && e.target.baseURI.match("receivableVerification") && !that.showInvoice && !that.showReconciliation && !that.showDestroy && !that.dialogInfo.visible) {
                    console.log("回车事件", that.dialogInfo.visible);
                    //回车后执行搜索方法
                    that.filterInfo.query.page = 1;
                    that.pageParm.query.page = 1;
                    that.init(that.filterInfo.query);
                }
            };
        },
        openWind () {
        },
        openFile (img) {
            console.log("--->", img);
            // // window.open(img, "_blank");
            // this.currentImage = img; // 设置当前图片
            // // this.dialogVisible = true; // 显示模态框
            // this.dialogInfo.type == 'lookImage'
            // this.dialogInfo.visible = true;
            if (img) {
                this.currentImage = img;
                this.imgList = [img];
                this.showimage = true;
                this.deg = 0;
                this.num = 0;
                this.isfirst = false;
                this.islast = false;
            }
        },
        closeimage () {
            this.showimage = false;
        },
        getHeight () {
            if (this.contentStyleObj.height == "100%") {
                var height =
                    window.innerHeight - parseInt(this.contentStyleObj.height) - 160;
            } else {
                var height =
                    window.innerHeight - parseInt(this.contentStyleObj.height) - 146;
            }
            this.pageParm.tableHeight = height + "px";
        },
        // 重置table高度
        resetHeight () {
            return new Promise((resolve, reject) => {
                this.tableH = 0
                resolve()
            })
        },
        // 设置table高度
        fetTableHeight () {
            this.resetHeight().then(res => {
                this.pageParm.tableHeight = this.$refs.tableWrapper.getBoundingClientRect().height - 64
                // 设置最小高度，确保表格可以正常显示
                // this.tableH = Math.max(containerHeight - 10, 200); // 最小300px
            })
        },
        //获取本月月初 月末
        // getonemonth() {
        //   var nowDate = new Date();
        //   var fullYear = nowDate.getFullYear();
        //   var month = nowDate.getMonth() + 1; // getMonth 方法返回 0-11，代表1-12月
        //   var endOfMonth = new Date(fullYear, month, 0).getDate(); // 获取本月最后一天

        //   this.settlement_time =  nowDate.getFullYear() + "-" + (nowDate.getMonth() + 1);
        //   this.filterInfo.query.settlement_time =  nowDate.getFullYear();
        // },
        //格式化年月日
        getFullDate (targetDate) {
            var D, y, m, d;
            if (targetDate) {
                D = new Date(targetDate);
                y = D.getFullYear();
                m = D.getMonth() + 1;
                d = D.getDate();
            } else {
                y = fullYear;
                m = month;
                d = date;
            }
            m = m > 9 ? m : "0" + m;
            d = d > 9 ? d : "0" + d;
            return y + "-" + m + "-" + d;
        },
        init (data) {
            this.loading = true;
            let formData = new FormData();
            formData.append('group_id', data.group_id);
            formData.append('status', data.status);
            formData.append('identity_status', data.identity_status);
            formData.append('page', data.page);
            formData.append('limit', data.limit);
            getGroupList(formData).then(res => {
                this.showSummary = true;
                this.tableInfo.data = [];
                this.tableInfo.data = res.data.data;
                if (this.tableInfo.data.length === 0) {
                    this.dataText = "暂无数据";
                    this.task_count = 0.00;
                }
                this.task_count = res.data.other.task_count;
                this.pageParm.total = res.data.meta.total;
                this.loading = false;
            });

        },


        getCurrentDate () {
            const today = new Date();
            const year = today.getFullYear();
            const month = String(today.getMonth() + 1).padStart(2, '0');
            const day = String(today.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        },
        getCurrentMonth () {
            const today = new Date();
            const year = today.getFullYear();
            const month = String(today.getMonth() + 1).padStart(2, '0');
            return `${year}-${month}`;
        },

        getParamList () {
            getGroupParam().then(res => {
                let {
                    group_id,//发布企业
                    status, //发布状态
                    service_staff_id,//服务专员
                    settlement_period,//账期,
                    identity_status, //认证状态

                } = res.data;

                group_id = group_id.map(v => {
                    return {
                        key: v.value,
                        value: v.name
                    };
                });

                status = status.map(v => {
                    return {
                        key: v.value,
                        value: v.name
                    };
                });
                identity_status = identity_status.map(v => {
                    return {
                        key: v.value,
                        value: v.name
                    };
                });

                service_staff_id = service_staff_id.map(v => {
                    return {
                        key: v.value,
                        value: v.name
                    };
                });
                settlement_period = settlement_period.map(v => {
                    return {
                        key: v.value,
                        value: v.name
                    };
                });
                this.listTypeInfo.group_id = group_id;
                this.listTypeInfo.status = status;
                this.listTypeInfo.identity_status = identity_status;
                this.service_staff_id = service_staff_id;
                this.settlement_period_list = settlement_period
            });

        },

        handleClick (event, data) {
            console.log(event, data);
            console.log('当前事件---', event)
            switch (event) {
                case "modify":
                    this.$nextTick(() => {
                        this.$refs.groupForm.clearValidate();
                    });
                    let formData = new FormData()
                    formData.append('group_id', data.group_id);
                    groupDetail(formData).then(res => {
                        this.groupForm.group_id = data.group_id,
                            this.groupForm.group_name = res.data.group_name
                        this.groupForm.contact_name = res.data.contact_name
                        this.groupForm.contact_phone = res.data.contact_phone
                        this.groupForm.contact_email = res.data.contact_email
                        this.groupForm.business_license = res.data.business_license
                        this.groupForm.address = res.data.address
                        this.groupForm.account = res.data.account
                        this.groupForm.pwd = ""
                        this.groupForm.settlement_period_id = res.data.settlement_period
                        this.groupForm.settlement_period = ""
                        this.settlement_period_list.forEach((item) => {
                            if (item.key == res.data.settlement_period) {
                                this.groupForm.settlement_period = item.value

                            }
                        })
                        this.identity_status_list.forEach((item) => {
                            if (item.key == res.data.identity_status) {
                                this.groupForm.identity_status = item.value

                            }
                        })
                        this.groupForm.settlement_period = this.groupForm.settlement_period,
                            console.log('修改时账期---', this.groupForm.settlement_period)
                        this.groupForm.service_staff_id = res.data.service_staff_id,
                            this.groupForm.service_staff = res.data.service_staff
                    })
                    this.dialogInfo.type = "modifyGroup"
                    this.dialogInfo.visible = true
                    break;
                case "enable":
                    this.$confirm("确定启用吗？启用之后该企业账号下所有人员将可以正常登录使用", "启用", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    })
                        .then(() => {
                            let formData = new FormData();
                            formData.append('group_id', data.group_id)
                            formData.append('status', 1)

                            editStatus(formData)
                                .then(res => {
                                    if (res.status == 200) {
                                        this.$message({
                                            message: res.msg,
                                            type: "success"
                                        });
                                        this.init(this.filterInfo.query);
                                    }
                                })
                                .catch(() => { });
                        })
                        .catch(() => {
                            this.$message({
                                type: "info",
                                message: "已取消启用"
                            });
                        });
                    break;
                case "un_enable":
                    this.$confirm("确定禁用吗？禁用之后该账号下所有人员将无法登录", "禁用", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    })
                        .then(() => {
                            let formData = new FormData();
                            formData.append('group_id', data.group_id)
                            formData.append('status', 0)

                            editStatus(formData)
                                .then(res => {
                                    if (res.status == 200) {
                                        this.$message({
                                            message: res.msg,
                                            type: "success"
                                        });
                                        this.init(this.filterInfo.query);
                                    }
                                })
                                .catch(() => { });
                        })
                        .catch(() => {
                            this.$message({
                                type: "info",
                                message: "已取消禁用"
                            });
                        });
                    break;
                case "search":
                    this.pageParm.query.page = 1;
                    this.filterInfo.query.page = 1;
                    this.init(this.filterInfo.query);
                    break;
                case "reset":
                    for (let i in this.filterInfo.query) {
                        this.filterInfo.query[i] = "";
                    }
                    this.filterInfo.query.page = 1;
                    this.filterInfo.query.limit = 20;
                    this.pageParm.query.page = 1;
                    this.pageParm.query.limit = 20;
                    let datas = {};
                    datas = Object.assign({}, this.pageParm.query, this.filterInfo.query);
                    this.init(datas);
                    break;
                case "save":
                    this.dialogInfo.btLoading = false;
                    if (this.dialogInfo.type == 'addGroup') {


                        this.$refs.groupForm.validate(valid => {
                            if (valid) {
                                let formData = new FormData();
                                formData.append('group_id', this.groupForm.group_id),
                                    formData.append('group_name', this.groupForm.group_name),
                                    formData.append('contact_name', this.groupForm.contact_name),
                                    formData.append('contact_phone', this.groupForm.contact_phone),
                                    formData.append('contact_email', this.groupForm.contact_email),
                                    formData.append('address', this.groupForm.address),
                                    formData.append('business_license', this.groupForm.business_license),
                                    //formData.append('service_staff_id',this.groupForm.service_staff_id),
                                    formData.append('account', this.groupForm.account),
                                    formData.append('pwd', this.groupForm.pwd),

                                    this.service_staff_id.forEach((item) => {
                                        if (item.value == this.groupForm.service_staff) {
                                            this.groupForm.service_staff_id = item.key
                                            formData.append('service_staff_id', this.groupForm.service_staff_id)
                                        }
                                    })

                                this.settlement_period_list.forEach((item) => {
                                    if (item.value == this.groupForm.settlement_period) {
                                        formData.append('settlement_period', item.key)
                                    }
                                })

                                groupAdd(formData).then(res => {
                                    if (res.status == 200) {
                                        this.$message({
                                            message: res.msg,
                                            type: "success"
                                        });
                                        this.init(this.filterInfo.query);
                                        this.dialogInfo.btLoading = true;
                                        this.dialogInfo.visible = false;
                                    }
                                }).catch(() => {

                                });
                            } else {
                                console.log("error submit!!");
                                return false;
                            }
                        });


                    }
                    if (this.dialogInfo.type == 'modifyGroup') {
                        this.$refs.groupForm.validate(valid => {
                            if (valid) {
                                let formData = new FormData();
                                formData.append('group_id', this.groupForm.group_id),
                                    formData.append('group_name', this.groupForm.group_name),
                                    formData.append('contact_name', this.groupForm.contact_name),
                                    formData.append('contact_phone', this.groupForm.contact_phone),
                                    formData.append('contact_email', this.groupForm.contact_email),
                                    formData.append('address', this.groupForm.address),
                                    formData.append('business_license', this.groupForm.business_license),
                                    //formData.append('service_staff_id',this.groupForm.service_staff_id),
                                    formData.append('account', this.groupForm.account),
                                    formData.append('pwd', this.groupForm.pwd),

                                    this.service_staff_id.forEach((item) => {
                                        if (item.value == this.groupForm.service_staff) {
                                            this.groupForm.service_staff_id = item.key
                                            formData.append('service_staff_id', this.groupForm.service_staff_id)
                                        }
                                    })
                                this.settlement_period_list.forEach((item) => {
                                    if (item.value == this.groupForm.settlement_period) {
                                        formData.append('settlement_period', item.key)
                                    }
                                })
                                this.identity_status_list.forEach((item) => {
                                    if (item.value == this.groupForm.identity_status) {
                                        this.groupForm.identity_status = item.key
                                        formData.append('identity_status', this.groupForm.identity_status)
                                    }
                                })

                                groupEdit(formData).then(res => {
                                    if (res.status == 200) {
                                        this.$message({
                                            message: res.msg,
                                            type: "success"
                                        });
                                        this.init(this.filterInfo.query);
                                        this.dialogInfo.btLoading = true;
                                        this.dialogInfo.visible = false;
                                    }
                                }).catch(() => {

                                });
                            } else {
                                console.log("error submit!!");
                                return false;
                            }
                        });
                    }

                    break;
                case "close":
                    this.dialogInfo.btLoading = false;
                    this.dialogInfo.visible = false;
                    break;
            }
        },
        handleEvent (event, data, label) {
            let datas = {};
            switch (event) {
                case "tableCheck":
                    this.addId = [];
                    if (this.addId.length > 0) this.isBill = false
                    else this.isBill = true
                    data.forEach(v => {
                        this.addId.push(v.id);
                    });
                    break;
                case "rowClick":
                    break;
                case "search":
                    console.log('333333')
                    this.pageParm.query.page = 1;
                    this.filterInfo.query.page = 1;
                    this.init(this.filterInfo.query);
                    break;
                // 分页改变当前页
                case "curPage":
                    if (!data) return;
                    this.pageParm.query.page = data;
                    this.filterInfo.query.page = data;
                    datas = Object.assign({}, this.pageParm.query, this.filterInfo.query);
                    this.init(datas);
                    break;
                // 分页列表
                case "pageSize":
                    if (!data) return;
                    this.pageParm.query.limit = data;
                    this.filterInfo.query.limit = data;
                    this.pageParm.query.page = 1;
                    this.filterInfo.query.page = 1;
                    datas = Object.assign({}, this.pageParm.query, this.filterInfo.query);
                    this.init(datas);
                    break;
                default:
                    break;
            }
        },
    },
    // destroyed () {
    //     window.removeEventListener("resize", this.getHeight);
    // }
};
</script>
<style lang="scss" scoped>
.taskList_box_title {
    padding-bottom: 20px;
    line-height: 40px;
}

.taskList_box {
    width: 600px;
    height: 500px;
    overflow-y: auto;
    border: 1px solid #ddd;
    margin-right: -10px;
    border: 1px solid #ddd;
    line-height: 47px;
    width: 623px;

    .el-col {
        height: 60px;
        line-height: 40px;
        padding: 10px 0;

        .el-input-number {
            width: 140px;
        }
    }
}

/* 去掉input尾部上下小箭头 start */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    -o-appearance: none !important;
    -ms-appearance: none !important;
    appearance: none !important;
    margin: 0;
}

input[type="number"] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    -o-appearance: textfield;
    -ms-appearance: textfield;
    appearance: textfield;
}

/* 去掉input尾部上下小箭头 end */
</style>
<style lang="scss" scoped>
::v-deep .addFrom .el-cascader--mini {
    width: 360px;
}

::v-deep .el-form-item--medium .el-form-item__label {
    height: 50px;
}

::v-deep .el-form-item--medium .el-form-item__content {
    // height: 50px;
}

::v-deep .license .el-form-item__error {
    color: #ff4949;
    font-size: 12px;
    line-height: 1;
    padding-top: 25px;
    position: absolute;
    top: 60%;
    left: 0;
}

::v-deep .el-form-item__error {
    color: #ff4949;
    font-size: 12px;
    line-height: 1;
    padding-top: 4px;
    position: absolute;
    top: 60%;
    left: 0;
}

::v-deep .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

::v-deep .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 78px;
    line-height: 78px;
    text-align: center;
}

.avatar {
    width: 120px;
    height: 78px;
    display: block;
}

.icon-box {
    display: inline-block;
    font-size: 12px;
    margin-left: 10px;

    span {
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        text-align: center;
        line-height: 20px;
        color: #fff;
    }
}



.concatcss {
    padding-top: 10px;
    padding-left: 10px;
    margin-bottom: 20px;
    position: relative;
    margin-top: 10px;
}

.concatcss_line {
    width: 360px;
    border: 1px dashed #c8b9b9;
}

::v-deep.el-form-item {
    margin-bottom: 0px;
}

::v-deep.concatcss>.el-form-item>.el-form-item__label {
    font-size: 12px !important;
}

::v-deep.concatcss>.el-form-item>.el-form-item__content>.el-input>.el-input__inner {
    font-size: 12px !important;
}

.bgfff {
    background: #fff;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.bgfffs {
    background: #fff;
}

.tableHeight {
    flex: 1;
    box-sizing: border-box;
}

.container-box {
    background: #f5f7fa;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

::v-deep .pagination-container {
    margin-top: 0 !important;
}

.addicon {
    color: #409eff;
    font-size: 20px;
    vertical-align: middle;
}

.addicon:hover {
    cursor: pointer;
}

::v-deep .el-button-group>.el-button:not(:last-child) {
    margin-right: 10px;
}

.imagess {
    width: 120px;
    height: 78px;
    border-radius: 4px;
}

.box_img_item_info {
    width: 120px;
    // height: 78px;
    position: relative;
}
</style>